<template>
  <div>信息管理</div>
  <div class="layout">
    <div class="box">
      <div class="header">
        <div class="left">
          <!-- 搜索 -->
          <el-input
            v-model="searchValue"
            style="width: 280px"
            placeholder="Please Input"
            :prefix-icon="Search"
          />
          <!-- 下拉选择 -->
          <el-select
            v-model="selectValue"
            clearable
            style="margin-left: 16px; width: 160px"
            placeholder="请选择所属栏目"
          >
            <!-- <el-option
              v-for="item in tableData"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            /> -->
          </el-select>
        </div>

        <el-button type="primary">高级搜索</el-button>
      </div>

      <div class="content">
        <div class="item" v-for="item in 12" :key="item">
          <!-- 班级 -->
          <div class="class">
            <span class="class" :class="{ 'first-span': true }">3D设计(1)班</span>
            <span class="detail" :class="{ 'second-span': true }">查看详情</span>
          </div>
          <div class="counselor">
            <span :class="{ 'first-span': true }">辅导员</span>
            <span :class="{ 'second-span': true }">赵吾光</span>
          </div>
          <div class="monitor">
            <span :class="{ 'first-span': true }">班长</span>
            <span :class="{ 'second-span': true }">冯艺莲</span>
          </div>
          <div class="studentNum">
            <span :class="{ 'first-span': true }">学生人数</span>
            <span :class="{ 'second-span': true }">35人</span>
          </div>
          <div class="classroom">
            <span :class="{ 'first-span': true }">教室</span>
            <span :class="{ 'second-span': true }">文科楼A栋2楼204室</span>
          </div>
        </div>
      </div>
      <!-- 分页器 -->
      <div class="demo-pagination-block">
        <el-pagination
          current-page="100"
          page-size="100"
          :page-sizes="[10, 20, 30, 40]"
          :size="large"
          :disabled="disabled"
          :background="background"
          layout="total,sizes, prev, pager, next,jumper"
          :total="1000"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <question />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import question from '../components/question.vue'

const selectValue = ref('')
const searchValue = ref('')

// const classInfoList = ref([
//   {
//     id: 1,
//     name: '3D设计(1)班',
//     counselor: '赵吾光',
//     monitor: '冯艺莲',
//     studentNum: 30,
//     classroom: '文科楼A栋2楼204室'
//   }
// ])
</script>

<style lang="scss" scoped>
.layout {
  display: flex;
  justify-content: space-between;

  .box {
    position: relative;
    padding: 0 20px;
    width: 1229px;
    height: 866px;
    background-color: #fff;

    .header {
      padding: 20px 0;
      display: flex;
      justify-content: space-between;
    }

    .content {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;

      .item {
        padding: 20px 20px;
        border-radius: 8px;
        background-color: #f5f7fa;

        div {
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;

          .detail {
            cursor: pointer;
            font-size: 14px;
            line-height: 24px;
            color: #409eff;
          }

          .class {
            font-size: 14px;
            font-weight: normal;
            line-height: 24px;
            color: #131414;
          }
        }

        .first-span {
          font-size: 12px;
          line-height: 20px;
          color: #606266;
        }

        .second-span {
          font-size: 12px;
          line-height: 20px;
          color: #131414;
        }

        &:hover {
          background-color: #ecf5ff;
        }
      }
    }

    .demo-pagination-block {
      position: absolute;
      bottom: 50px;
      left: 20px;
    }
  }
}
</style>
